<template>
	<view class="content">
		<view class="list">
			<view class="list-item" v-for="(item,index) in list" :key="index">
				<view class="item-title">
					{{item.title}}
				</view>
				<view class="item-children" >
					<view class="child" v-for="(child,childIndex) in item.subList" @click="handleToChildView(child)">
						<image class="icon" :src="child.icon" mode=""></image>
						<view class="child-label">
							{{child.label}}
						</view>
					</view>
					
				</view>
				
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						title: '考勤管理',
						subList: [{
								icon: '/static/images/sign.png',
								label: '移动打卡',
								targetUrl: '/pages/signIn/signIn'
							},
							{
								icon: '/static/images/schedule.png',
								label: '我的排班',
								targetUrl: '/pages/myAttend/myAttend'
							},
							{
								icon: '/static/images/statistics.png',
								label: '考勤统计',
								targetUrl: '/pages/statistics/statistics'
							}
						],
						role: []

					},
					{
						title: '表单管理',
						subList: [{
								icon: '/static/images/absence.png',
								label: '请假申请',
								targetUrl: '/pages/leaveApply/leaveApply'
							},
							{
								icon: '/static/images/overTime.png',
								label: '加班申请',
								targetUrl: '/pages/overTimeApply/overTimeApply'
							},
							
							{
								icon: '/static/images/apply.png',
								label: '我的表单',
								targetUrl: '/pages/myApply/myApply'
							},
							{
								icon: '/static/images/aduit.png',
								label: '我的审核',
								targetUrl: '/pages/myApplcation/myApplcation'
							},
							
							{
								icon: '/static/images/my-err.png',
								label: '我的异常',
								targetUrl: '/pages/myAnomaly/myAnomaly'
							},
							{
								icon: '/static/images/xiaojia.png',
								label: '销假申请',
								targetUrl: '/pages/clearance/clearance'
							},
						],
						role: []
					},
					// {
					// 	title: '主管功能',
					// 	subList: [{
					// 			icon: '/static/images/admin.png',
					// 			label: '基础排班',
					// 			targetUrl: ''
					// 		},

					// 	],
					// 	role: []
					// }
				]
			}
		},
		onLoad() {

		},
		methods: {
			handleToChildView(child){
				uni.navigateTo({
					url:child.targetUrl
				})
				
			}

		}
	}
</script>

<style lang="scss">
	.content {
		padding: 16px;
		background-color: rgb(238,238,238);
		min-height: 100vh;
		
		.list{
			.list-item{
				padding: 16px;
				background-color: #fff;
				border-radius: 8px;
				.item-title{
					font-size: 18px;
					font-weight: bold;
				}
				
				.item-children{
					display: flex;
					justify-content: flex-start;
					align-items: center;
					flex-wrap: wrap;
					margin: 8px 0;
					.child{
						width: 33%;
						display: flex;
						justify-content: center;
						align-items: center;
						flex-direction: column;
						box-sizing: border-box;
						padding: 8px ;
						.icon{
							width: 36px;
							height: 36px;
						}
						.child-label{
							margin-top: 8px;
							font-size: 14px;
							color: #999;
						}
					}
				}
			}
			
			.list-item+ .list-item{
				margin-top: 16px;
			}
		}
		
		
	}


</style>